<template>
  <div id="detailofmovie">
    <div class="head">
      <div class="hbox">
        <div class="left" @click="back">返回</div>
        <div class="middle">{{movie.movie.nm}}</div>
      </div>
    </div>
    <cinematwo :movie="movie" @click=""></cinematwo>
      <van-tabs animated  >
      <van-tab :title="day">
        <cinema :date="date"></cinema>
      </van-tab >
      <van-tab :title="tomorrow">
        <cinema :date="date"></cinema>
      </van-tab>
      <van-tab :title="afterday">
        <cinema :date="date"></cinema>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import cinema from "../CnimaAndMovie/CinemaComponent.vue"
import cinematwo from "../CnimaAndMovie/CinemaComponent2.vue"
export default {
  name:'detailmovie',
  components:{cinema,cinematwo},
  computed:{
    ...mapState(['movieId'])
  },
  created(){
    this.getMovie()
    this.getDate()
  },
  mounted(){
    this.day ='今天' + this.dayjs(new Date()).format("MM-DD")
    this.tomorrow = '明天' + this.dayjs(new Date()).add(1, "days").format("MM-DD")
    this.afterday ='后天' + this.dayjs(new Date()).add(2, "days").format("MM-DD")
  },
  data(){
    return {
      movie:{},
      date:[],
      day:'',
      tomorrow:'',
      afterday:'',
    }
  },
  methods:{
    async getMovie() {
      await this.axios
        .get(`movie/detail?movieId=${this.movieId}`)
        .then((re) => {
          this.movie = re
        })
    },
    async getDate() {
      await this.axios
      .get(`index/moreCinemas?day=2021-11-12&movieId=${this.movieId}&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=1&lat=23.135636443326355&lng=113.42422402238324`)
      .then(value=>{
        this.date=value
      })
    },
    back() {
      this.$router.go(-1);
    },
  }
}
</script>

<style scoped>
.head {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.hbox {
  height: 50px;
  width: 100%;
  background-color: red;
  line-height: 50px;
  text-align: center;
  color: white;
  position: relative;
}

.head .left {
  position: absolute;
  left: 10px;
}
.van-tab{
  font-size: 18px;
}
</style>